<template>
  <el-form ref="form" :model="form" label-width="150px" disabled>
    <el-form-item label="产品类目：" prop="businessType">
      <el-select v-model="form.businessType" clearable>
        <el-option
          v-for="item in businessTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="产品图片：" prop="productImg">
      <UploadFile :file-list="form.productImg" :limit="6" />
    </el-form-item>
    <el-form-item label="产品名称：" prop="name">
      <el-input v-model="form.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="产品简介：">
      <el-input v-model="form.introduction" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="适用门店：" prop="siteIdSet">
      <el-select v-model="form.siteIdSet" multiple clearable>
        <el-option
          v-for="item in siteList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="购买须知：" prop="playInstructions">
      <el-input v-model="form.playInstructions" type="textarea" rows="5" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="产品详情：" prop="illustrate">
      <RichText :value.sync="form.illustrate" disabled />
    </el-form-item>
  </el-form>
</template>

<script>

import { getAllSiteList, getBusinessType } from '@/api/common'
import UploadFile from '@/components/UploadFile/index.vue'
import RichText from '@/components/RichText/index.vue'

export default {
  name: 'Step1',
  components: {
    UploadFile,
    RichText
  },
  props: {
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      businessTypeList: [],
      siteList: [],
      form: {
        businessType: '',
        productImg: '',
        name: '',
        introduction: '',
        siteIdSet: [],
        playInstructions: '',
        illustrate: ''
      }
    }
  },

  created() {
    const {
      siteId,
      businessType,
      productImg,
      name,
      introduction,
      siteIdSet,
      playInstructions,
      illustrate
    } = this.formDetail
    this.getBusinessType(siteId)
    this.getAllSiteList(siteIdSet)
    this.form = {
      businessType,
      productImg,
      name,
      introduction,
      siteIdSet,
      playInstructions,
      illustrate
    }
  },

  methods: {

    // 获取业务形态
    getBusinessType(siteId) {
      const data = {
        siteId
      }
      getBusinessType(data).then(res => {
        this.businessTypeList = res || []
      }).catch(() => {
      })
    },

    // 获取所有门店
    getAllSiteList(siteIds = []) {
      const data = {
        siteIds: siteIds.join(',')
      }
      getAllSiteList(data).then(res => {
        this.siteList = res || []
      }).catch(() => {
      })
    }

  }
}
</script>
<style lang="scss" scoped></style>
